<template>
	<gui-page class="gui-bg-white cusbg" :customHeader="true">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->

				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text style="padding:10rpx; margin-left:38rpx"
					class="gui-h6 gui-blod gui-flex1 gui-ellipsis gui-primary-text gui-bold gui-color-white"></text>
				<gui-mp-navigation-spacing></gui-mp-navigation-spacing>
			</view>
		</template>
		<!-- 页面主体 -->
		<template v-slot:gBody>
			<view class="gui-list " style="padding: 30rpx 0 30rpx 30rpx;">
				<view class="gui-list-items">
					<view class="gui-list-image ucenter-face gui-relative" @click="changeAvatar">
						<image class="gui-list-image ucenter-face-image" :src="avatarUrl" mode="aspectFill">
						</image>
					</view>
					<view class="gui-list-body">
						<view class="gui-list-title">
							<text class="gui-list-title-text gui-primary-color">{{userInfo.userName}}</text>
						</view>
						<text class="gui-list-body-desc gui-color-gray gui-block">{{userInfo.phone}}</text>
					</view>
					<view class="edit" @click="goPage('/pages/user/setting?type=0')">
						点击修改资料
					</view>
				</view>
			</view>

			<view class="gui-list gui-margin-top gui-padding-x gui-bg-white">
				<view class="gui-list-items" @click="gotoOrder('货到付款')">
					<image class="left-icon" src="/static/images/Group2692@2x.png" mode=""></image>
					<view class="gui-list-body  gui-border-b">
						<view class="gui-list-title">
							<text class="gui-list-title-text">货到付款订单</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
				</view>
				<view class="gui-list-items" @click="gotoOrder('在线付款')">
					<image class="left-icon" src="/static/images/Vector@2x.png" mode=""></image>
					<view class="gui-list-body gui-border-b">
						<view class="gui-list-title">
							<text class="gui-list-title-text">线上支付订单</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
				</view>
				<view class="gui-list-items" @click="gotoAddressBook">
					<image class="left-icon" src="/static/images/Group48097536@2x.png" mode=""></image>
					<view class="gui-list-body gui-border-b">
						<view class="gui-list-title">
							<text class="gui-list-title-text">地址簿</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
				</view>
				<view class="gui-list-items" @click="getPhone">
					<image class="left-icon" src="../../static/images/Group48097528@2x.png" mode=""></image>
					<view class="gui-list-body gui-border-b">
						<button open-type="contact" style="margin: 0;background: #fff;padding: 0"> 
						<view class="gui-list-title">
							
							<text class="gui-list-title-text">在线客服</text>
							
						</view>
						</button>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
				</view>
				<view class="gui-list-items gui-border-b" @click="goPage('/pages/user/setting')">
					<image src="/static/images/sz.png" mode="" style="width: 32rpx;height: 33rpx;"></image>
					<view class="gui-list-body ">
						<view class="gui-list-title">
							<text class="gui-list-title-text">设置</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
				</view>
			</view>
		</template>




	</gui-page>
</template>
<script>
	import graceJS from '@/Grace6/js/grace.js';
	export default {
		data() {
			return {
				items: [
					[0, '', '全部货源'],
					[0, '', '置顶货源'],
					[0, '', '普通货源']

				],
				userInfo: {
					userName: "用户昵称",
					mobile: "",
					gender: '',
					city: '',
					bio: '',
					role: ''
				},
				shop_list: [],
				about_content: '',
				xy_content: '',
				baseUrl: uni.gRequest.file,
				avatarUrl: '/static/images/touxiang.png'
			}
		},
		onShow() {
			var u = uni.gRequest.checkLogin();
			var self = this;
			if (u) {
				this.userInfo = u;
				uni.gRequest.get('fhxmuser/' + u.userId).then(res => {
					if (res.data.image) {
						this.avatarUrl = uni.gRequest.file + res.data.image
					}
					this.userInfo = res.data
				})
			}
		},
		methods: {
			goPage(url, type) {
				uni.navigateTo({
					url: url + '?type=' + type
				});
			},
			gotoAddressBook() {
				uni.navigateTo({
					url: "/pages/AddressBooks/AddressBooks"
				})
			},
			gotoOrder(num) {
				uni.navigateTo({
					url: "/pages/PaymentOrder/PaymentOrder?type=" + num
				})
			},
			getUserXy() {
				uni.gRequest.get('dict/get/information', {
					key: 'user.agreement'
				}).then(result => {
					this.xy_content = result.msg;
					this.$refs.guimodal.open();
				});

			},
			getAboutUs() {
				uni.gRequest.get('dict/get/information', {
					key: 'about.us'
				}).then(result => {
					this.about_content = result.msg;
					this.$refs.about_us.open();
				});

			},
			// 获取客服电话
			getPhone() {
				uni.gRequest.get('dict/get/information', {
					key: 'service.phone'
				}).then(result => {
					uni.showModal({
						title: '联系客服',
						content: result.msg,
						showCancel: true,
						cancelText: '取消',
						confirmText: '呼叫',
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: res.content
								})
							}

						},
						fail: () => {},
						complete: () => {}
					});
				});
			},
			vip() {
				uni.navigateTo({
					url: '/pages/user/vip'
				})
			},
			quitLogin() {
				uni.removeStorageSync("userInfo");

				this.userInfo = {
					user_nickname: "用户昵称",
					user_desc: "描述信息"
				};
			},
			goqiugou() {
				uni.navigateTo({
					url: '/pages/qiugou/list'
				})
			},
			goaudit() {
				uni.navigateTo({
					url: '/pages/product/list'
				})
			},
			goshangpu() {
				uni.navigateTo({
					url: '/pages/shop/list'
				})
			},
			goSettings() {
				uni.navigateTo({
					url: '/pages/user/settings'
				})
			},
			taped(index) {
				// 页面值
				var s = ['5', '6', '7'];
				this.square(s[index]);
			},
			taped2(index) {
				// 页面值
				var s = ['8', '9', '10'];
				this.square(s[index]);
			},
			square(i) {
				if (i == '8') {
					uni.navigateTo({
						url: '/pages/shop/list?flag=guanzhu'
					})
				} else {
					uni.navigateTo({
						url: '/pages/product/square?i=' + i
					})
				}

			},
			groupJoin() {
				uni.navigateTo({
					url: '/pages/shop/add'
				})
			},
			groupManager() {
				uni.navigateTo({
					url: '/pages/shop/details?id=' + this.shop_list[0].id
				})
			},
			groupOrder() {
				uni.navigateTo({
					url: '/pages/order/list1'
				})
			}

		}
	}
</script>
<style lang="scss">
	.edit {
		width: 200rpx;
		font-size: 24rpx;
		line-height: 60rpx;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		background-color: #4197FE;
		color: #fff;
		text-align: center;

	}

	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.left-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.container {
		width: 100%;
	}

	.header {
		height: 414rpx;
		background: #347DFD;
		position: relative;

		.header-user {
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 120rpx;
			left: 20rpx;

			image {
				width: 140rpx;
				height: 140rpx;
			}

			.user-info {
				margin-left: 16rpx;
				display: flex;
				justify-content: center;
				flex-direction: column;
				color: white;
				font-size: 30rpx;

				text:first-child {
					font-size: 48rpx;
					margin-bottom: 14rpx;
				}
			}
		}
	}
</style>